<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="must-revalidate,no-cache">
    <meta http-equiv="x-dns-prefetch-control" content="on" />
    <meta name="version" content="20170614">
	<title>健康资讯</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<script src="js/initRem.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">  
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body class="w-health">
	<div class="header">
		<div class="navTop">
			<span class="active">推荐</span>
			<span>育儿</span>
			<span>母婴</span>
			<span>孕妇</span>
			<span>孕产妇</span>
			<span>孕妇</span>
			<span>孕妇</span>
		</div>
	</div>
	<!-- Swiper轮播图 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
            	<a href="health-detail.html">
            		<img src="images/1.jpg"/>
            	</a>
            </div>
            <div class="swiper-slide">
            	<img src="images/2.jpg"/>
            </div>
            <div class="swiper-slide">
            	<img src="images/1.jpg"/>
            </div>
            <div class="swiper-slide"><img src="images/2.jpg"/></div>
            <div class="swiper-slide"><img src="images/1.jpg"/></div>
            <div class="swiper-slide"><img src="images/2.jpg"/></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!--内容-->
    <div class="navigation">
    	<ul class="information">
    		<li class="liCell">
    			<a href="health-detail.html">
    				<div class="leftCell">
	    				<img src="images/2.jpg"/>
	    			</div>
	    			<div class="rightCell">
	    				<div class="bigFont">
	    					这大概是你运动一个月,迟迟没有变瘦的原因
	    				</div>
	    				<div class="auther">
	    					<div class="leftAu">
	    						育儿
	    					</div>
	    					<div class="rightAu">
	    						<!--<span><img src="images/see-icon.png"/></span>-->
	    						浏览数:30
	    					</div>
	    				</div>
	    			</div>
    			</a>
    		</li>
    		<li class="liCell">
    			<a href="health-detail.html">
    				<div class="leftCell">
	    				<img src="images/main-2.png"/>
	    			</div>
	    			<div class="rightCell">
	    				<div class="bigFont">
	    					这大概是你运动一个
	    				</div>
	    				<div class="auther">
	    					<div class="leftAu">
	    						母婴
	    					</div>
	    					<div class="rightAu">
	    						浏览数:30
	    					</div>
	    				</div>
	    			</div>
    			</a>
    		</li>
    		
    	</ul>
    </div>
	
</body>
<script type="text/javascript">
	//轮播图
	 var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
    });
    $(".header ul li").each(function(index,item){
    	$(this).click(function(){
    		$(".header ul li").removeClass("active");
    		$(this).addClass("active");
    	})
    })
	function trim(str){ //删除左右两端的空格
　　     return str.replace(/(^\s*)|(\s*$)/g, "");
　　 };
	
</script>
</html>